<!-- 皮带系统 -->
<template>
  <div class="content gif">
    <div class="beltpicture">
      <div class="wrap" v-for="(value, key, index) in data" :key="index">
        <!-- 0为占位 -->
        <!-- 1右滚 -->
        <div class="item" :style="value.style" v-if="value.status === 1 && value.IsOn === true">
          <img :src="beltA" />
          <div class="extra" :style="value.Stable">
            <b-table :name="value.Name" :rowlist="value"></b-table>
          </div>
        </div>
        <!-- 2暂停 -->
        <div class="item" :style="value.style" v-if="value.IsOn === false">
          <img :src="belt" />
          <div class="extra" :style="value.Stable">
            <b-table :name="value.Name" :rowlist="value"></b-table>
          </div>
        </div>
        <!-- 3滚筒 -->
        <div class="item" :style="value.style" v-if="value.status === 3">
          <img :src="tong" />
        </div>
        <!-- 4左滚 -->
        <div class="item" :style="value.style" v-if="value.status === 4 && value.IsOn == true">
          <img :src="beltC" />
          <div class="extra" :style="value.Stable">
            <b-table :name="value.Name" :rowlist="value"></b-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // Name匹配对应的皮带，后端传false，对应皮带status变更为0，其他状态不修改，皮带图片方向写死不变
  // 后端传8组皮带状态
  let belt = require("../../static/belt.json");
  import BTable from '@/components/bTable'
  import {
    beltList
  } from '../server/api.js'
  export default {
    data() {
      return {
        beltA: require("../assets/images/05-皮带a.gif"), //右滚
        beltB: require("../assets/images/05-皮带b.gif"), //右下滚
        beltC: require("../assets/images/05-皮带c.gif"), //左滚
        belt: require("../assets/images/belt.png"), //暂停
        tong: require("../assets/images/tong.png"), //桶
        data: [],
        timer: null
      };
    },
    created() {
      this.data = belt.data.activityPrize;
      this.init()
    },
    mounted() {
      const timer = setInterval(() => {
        this.init()
      }, 511000);
      this.$once('hook:beforeDestroy', () => clearInterval(timer))
    },
    methods: {
      async init() {
        const res = await beltList()
        let gain = res.data
        let list = gain.data.reduce((pre, cur) => {
          let target = pre.find(ee => ee.DeviceCode == cur.DeviceCode)
          if (target) {
            Object.assign(target, cur)
          } else {
            pre.push(cur)
          }
          return pre
        }, this.data)
      }
    },
    components: {
      BTable
    }
  };

</script>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 120px);
    padding: 0px 50px;

    .beltpicture {
      padding-top: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 11%);
      justify-items: center;
      grid-row-gap: 10px;

      .wrap {
        position: relative;

        .item {
          img {
            width: 100%;
            height: 100%;
          }

          .extra {}
        }
      }

    }
  }

</style>
